<template>
 <div class="">
          <el-form ref="studentForm" label-width="100px"  :model="formData" >
      <!-- <el-form-item label="課程狀態">
        <el-select v-model="formData.state" placeholder="請選擇">
          <el-option v-for="v,index in studentStatusOptions" :key="index" :label="v.label" :value="v.label">
          </el-option>
        </el-select>
      </el-form-item> -->

      <el-form-item v-if="formData.state === '調堂'" label="教室" prop="classroom_id" :rules="[
      { required: true, message: '請選擇調堂教室', trigger: 'change' }
    ]">
        <el-select v-model="formData.classroom_id" placeholder="請選擇">
          <el-option v-for="(item,index) in classRooms" :label="item.name" :key="index" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item v-if="formData.state === '調堂'" label="教練" prop="admin_id" :rules="[
      { required: true, message: '請選擇授課教練', trigger: 'change' }
    ]">
        <el-button-group>
          <el-button type="default" >{{formData.teacherName||'暫無選擇教練'}}</el-button>
          <el-button type="default"  icon="Search" @click="selectTeacher">
          </el-button>
        </el-button-group>
      </el-form-item>


      <el-form-item v-if="formData.state === '遲到'" label="遲到分鐘" :rules="[
      { required: true, message: '請輸入遲到時間(分鐘)', trigger: 'change' }
    ]">
        <el-input v-model="formData.lastMin" type="number" placeholder="请输入遲到分鐘">
        </el-input>
      </el-form-item>
      <el-form-item v-if="formData.state === '調堂'" label="調堂日期" prop="date" :rules="[
      { required: true, message: '請選擇調堂日期', trigger: 'change' }
    ]">
        <el-date-picker v-model="formData.date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>

      <el-form-item v-if="formData.state === '調堂'" label="時間" prop="start_time" :rules="[
      { required: true, message: '請選擇開始時間', trigger: 'change' }
    ]">
            <el-time-select  v-model="formData.start_time" :clearable="false"
          :disabled="formData.state !== '調堂'" :picker-options="{...startOptions}" :max-time="formData.end_time" placeholder="起始時間"
          >
        </el-time-select>
        <el-time-select v-model="formData.end_time" :picker-options="{...endOptions}" :min-time="formData.start_time"
          :clearable="false" :disabled="formData.state !== '調堂'" placeholder="結束時間"
          >
        </el-time-select>
      </el-form-item>
    </el-form>
<!-- <FouDialog  :title="'信息編輯'"  :width="'50%'" v-model:dialogValue="show">
    <template #content>
        <el-form ref="studentForm" label-width="100px"  :model="formData" >
      <el-form-item label="課程狀態">
        <el-select v-model="formData.state" placeholder="請選擇">
          <el-option v-for="v,index in studentStatusOptions" :key="index" :label="v.label" :value="v.label">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item v-if="formData.state === '調堂'" label="教室" prop="classroom_id" :rules="[
      { required: true, message: '請選擇調堂教室', trigger: 'change' }
    ]">
        <el-select v-model="formData.classroom_id" placeholder="請選擇">
          <el-option v-for="(item,index) in classRooms" :label="item.name" :key="index" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item v-if="formData.state === '調堂'" label="教練" prop="admin_id" :rules="[
      { required: true, message: '請選擇授課教練', trigger: 'change' }
    ]">
        <el-button-group>
          <el-button type="default" >{{formData.teacherName||'暫無選擇教練'}}</el-button>
          <el-button type="default"  icon="Search" @click="selectTeacher">
          </el-button>
        </el-button-group>
      </el-form-item>


      <el-form-item v-if="formData.state === '遲到'" label="遲到分鐘" :rules="[
      { required: true, message: '請輸入遲到時間(分鐘)', trigger: 'change' }
    ]">
        <el-input v-model="formData.lastMin" type="number" placeholder="请输入遲到分鐘">
        </el-input>
      </el-form-item>



      <el-form-item v-if="formData.state === '調堂'" label="調堂日期" prop="date" :rules="[
      { required: true, message: '請選擇調堂日期', trigger: 'change' }
    ]">
        <el-date-picker v-model="formData.date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>

      <el-form-item v-if="formData.state === '調堂'" label="時間" prop="start_time" :rules="[
      { required: true, message: '請選擇開始時間', trigger: 'change' }
    ]">
            <el-time-select  v-model="formData.start_time" :clearable="false"
          :disabled="formData.state !== '調堂'" :picker-options="{...startOptions}" :max-time="formData.end_time" placeholder="起始時間"
          >
        </el-time-select>
        <el-time-select v-model="formData.end_time" :picker-options="{...endOptions}" :min-time="formData.start_time"
          :clearable="false" :disabled="formData.state !== '調堂'" placeholder="結束時間"
          >
        </el-time-select>
      </el-form-item>
    </el-form>
    </template>
    <template #footer>
        <div>
      <el-button @click="show = false">關閉</el-button>
      <el-button color="#081F42" @click="submit">確認</el-button>
        </div>
    </template>
</FouDialog> -->
<teacherDio ref="teacherRef" @update="getTeacher"></teacherDio>
 </div>
</template>

<script setup>
import {ref,reactive,watch,onMounted} from 'vue'
import { dayjs, tagEmits } from "element-plus";
import {classroomList} from '@/http/index.js'
import teacherDio from '../../Invoices/invoice/addEdit/notes/teacherDio.vue'
const show = ref(false)
const studentStatusOptions= reactive([{
            label: '未點名',
            value: '未點名'
          },
          {
            label: '出席',
            value: '出席'
          },
          {
            label: '遲到',
            value: '遲到'
          },
          {
            label: '缺席',
            value: '缺席'
          },
          {
            label: '調堂',
            value: '調堂'
          },
          {
            label: '取消',
            value: '取消'
          },
        ])
const formData = reactive({
          state: '',
          status: '',
          teacherName: '',
          admin_id: '',
          classroom_id: '',
          lastMin: 0,
          start_time: '',
          end_time: '',
          date: dayjs().format('YYYY-MM-DD'),
        })
const startOptions = ref('')
const parentIndex = ref('')
const endOptions = ref('')
const props = defineProps({
    row:Object,
    index:[String,Number]
})
console.log(props.index);
formData.state = props.row?.state
parentIndex.value = props.index
watch(()=>props.row,(neaval)=>{
formData.state = neaval.state
},{
  deep:true
})
watch(()=>props.index,(neaval)=>{
  console.log(neaval);
parentIndex.value = props.index
})

const init = ()=>{
    // console.log(data,index);
    // formData.state = data.state
    // parentIndex.value = index
    // show.value = true
    startOptions.value = {
          start: '07:00',
          step: '00:15',
          end: '23:30',
        }
    endOptions.value = {
          start: '07:00',
          step: '00:15',
          end: '23:30',
        }
        classroomData()
}
const classRooms = ref([])
const classroomData = async()=>{
    let obj ={
  school_id:localStorage.getItem('school_id'),
  page: 1,
  limit:1000,
}
    const data = await classroomList(obj)
    if (data.code == 200) {
        classRooms.value = data.data.data
    }
} 
const teacherRef = ref('')
const selectTeacher = ()=>{
    teacherRef.value.dialogValue = true
teacherRef.value.TableData()
}
const getTeacher = (e)=>{
    formData.admin_id = e.id
    formData.teacherName = e.name
}
const studentForm = ref('')
const emit = defineEmits(['update'])
const submit = (cb)=>{
    studentForm.value.validate().then((res) => {
          let params = JSON.parse(JSON.stringify(formData));
          params.start_time = `${params.date} ${params.start_time}`;
          params.end_time = `${params.date} ${params.end_time}`;
          delete params.date;
    cb({params:params,index:parentIndex.value});
  })
  return
    studentForm.value.validate(async(valid)=>{
        console.log(valid);
        if(valid){
          let params = JSON.parse(JSON.stringify(formData));
          params.start_time = `${params.date} ${params.start_time}`;
          params.end_time = `${params.date} ${params.end_time}`;
          delete params.date;
         await emit('update',{params:params,index:parentIndex.value})
          show.value = false
        }else{
          return false
        }
    })
}
onMounted(() => {
  init()
})
defineExpose({
    init,submit
})
</script>

<style scoped lang='less'>

</style>